
<template>
  <div class="translation-tool">
<!--    <h2 style="color: #adb5bd;margin-bottom: 30px;font-size: 32px">翻译与评估工具</h2>-->

    <textarea v-model="english" placeholder="请输入英文原文"></textarea>
    <textarea v-model="userTranslation" placeholder="请输入你的翻译（可选）"></textarea>

    <button @click="submitTranslation" >分析</button>

    <div class="result" v-if="result">
      <h3>翻译技法识别</h3>
      <p><strong>英文结构：</strong> {{ result.english_syntax.join('，') }}</p>
      <p v-if="result.user_chinese_syntax"><strong>用户翻译结构：</strong> {{ result.user_chinese_syntax.join('，') }}</p>
      <p v-if="result.chinese_syntax"><strong>机器翻译结构：</strong> {{ result.chinese_syntax.join('，') }}</p>

      <p><strong>识别技法：</strong> {{ result.technique.join(', ') }}</p>

      <h3 v-if="result.translated">自动翻译：</h3>
      <p>{{ result.translated }}</p>

      <h3 v-if="result.evaluation">翻译评价：</h3>
      <p>{{ result.evaluation }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      english: '',
      userTranslation: '',
      result: null
    }
  },
  methods: {
    async submitTranslation() {
      if (!this.english.trim()) {
        alert('英文不能为空');
        return;
      }

      try {
        const response = await axios.post('/api/word/evaluate_translation', {
          english: this.english,
          user_translation: this.userTranslation
        });

        this.result = response.data;
      } catch (error) {
        console.error('请求出错：', error);
        alert('提交失败，请检查后端是否运行，或稍后重试。');
      }
    }
  }
}
</script>

<style scoped>
.translation-tool {
  width: 90%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  color: #adb5bd;
  background-color: rgba(73,80,87,0.43);
}
button {
  background-color: rgba(218, 223, 230, 0.44);
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}
button:hover {
  background-color: #3eaf11;
}
.result {
  margin-top: 20px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
}
</style>
